<template>
  <div class="blog-info-tags">
    <div class="tags-span">
      <span ><el-icon :size="15"><PriceTag/></el-icon>  {{tagList.list.length}} 标签</span>
    </div>
    <el-divider />
    <router-link class="tags-link" :to="{path:'/tags',query:{id:item.id}}" v-for="(item,index) in tagList.list">
    <el-tag effect="dark" :size="'large'" style="margin-left: 5px"
            :type="color[index%5]">{{ item.name }}
    </el-tag>
    </router-link>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {tagList} from "@/store/customer/inedx";
const color = ref(['','success','info','warning','danger'])

onMounted(()=>{
  if(tagList.list.length<=0){
    tagList.getTagList()
  }
})

</script>
<style scoped>
.tags-span{
  margin-top: 15px;
  font-size: 20px;
}
.tags-link:hover{
  background-color: white;
}
</style>